<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="../css/pulic.css">
    <link rel="stylesheet" href="../css/list.css">
</head>
<body>
    <div class="header">
        <div class="box">
          <a href="./index.html" >首页</a>
          <a href="shopping.html" >商城</a>
          <a href="./cart.html">我的订单</a>
          <a>关于我们</a>
        </div>
    </div>
      <div class="nav">
          <a href= ><img src="../images/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png" alt=""></a>
          <span class="mulu">目录</span>
          <div class="box">
            <input type="text">
            <button></button>
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
              <li>7</li>
              <li>8</li>
              <li>9</li>
              <li>10</li>
            </ul>
         </div>
          <p>消息</p>
          <p>收藏</p>
          <p class="cart">购物车</p>
          <p>下载APP</p>
          <span class="denglu">登录</span>
          <div class="on">
            <span>您好</span> <span class="username">你的孤独</span>
            <button class="logout">注销登录</button>
          </div>
          <div class="off">
            <span>您好</span> <a href="./login.html">请登录</a>
          </div>
          <div class="list2">
            <div class="left">
                <p class="title">主题市场</p>
                <ul>
                    <Li>上衣</Li>
                    <Li>裙装</Li>
                    <Li>裤子</Li>
                    <Li>女鞋</Li>
                    <Li>美妆</Li>
                    <Li>包包</Li>
                    <Li>配饰</Li>
                    <Li>男友</Li>
                    <Li>内衣</Li>
                    <Li>母婴</Li>
                    <Li>家居</Li>
                    <Li>食品</Li>
                </ul>
            </div>
            <div class="center">
                <div class="title"> 
                  <p>热门品牌</p>
                  <span>全部品牌 ></span>
                </div>
                <ul>
                    <li>PRADA</li>
                    <li>SICLCILY 西西里</li>
                    <li>CHANEL</li>
                    <li>DREAM TREND</li>
                    <li>夏梵尼</li>
                    <li>御泥坊</li>
                    <li>衣阁香拉</li>
                    <li>美康粉黛</li>
                    <li>New balance</li>
                </ul> 
            </div>
            <div class="right">
              <div class="title"> 
                  <p>流行话题</p>
                  <span>全部话题 ></span>
              </div>
              <ul>
                  <li>#小长假倒计时，明天上班穿这套！#</li>
                  <li>#小长假倒计时，明天上班穿这套！#</li>
                  <li>#小长假倒计时，明天上班穿这套！#</li>
                  <li>#小长假倒计时，明天上班穿这套！#</li>
                  <li>#小长假倒计时，明天上班穿这套！#</li>
                  <li>#小长假倒计时，明天上班穿这套！#</li>
                 
              </ul>
            </div>
         </div>
       </div>
       <div class="box container">
        <ul class="category">
          <li class="active">全部</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
        </ul>
        <ul class="filter">
          <li class="f active">全部</li>
          <li data-filter="hot" class="f">折扣</li>
          <li data-filter="sale" class="f">热销</li>
        </ul>
        <ul class="saleType">
          <li class="s active">全部</li>
          <li class="s">5</li>
          <li class="s">6</li>
          <li class="s">7</li>
          <li class="s">8</li>
          <li class="s">9</li>
        </ul>
        <ul class="sort">
          <li class="sort2 active">默认</li>
          <li data-type="id" data-method="ASC" class="sort2">综合 升序</li>
          <li data-type="id" data-method="DESC" class="sort2">综合 降序</li>
          <li data-type="price" data-method="ASC" class="sort2">价格 升序</li>
          <li data-type="price" data-method="DESC" class="sort2">价格 降序</li>
          <li data-type="sale" data-method="ASC" class="sort2">折扣 升序</li>
          <li data-type="sale" data-method="DESC" class="sort2">折扣 降序</li>
        </ul>
        <div class="pagination">
          <span class="pageInfo">1 / 11</span>
          <button class="prev">上一页</button>
          <button class="next">下一页</button>
          <select>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
            <option value="24">24</option>
          </select>
        </div>
        <div class="searchBox">
          <input type="text">
        </div>
      </div>
    
      <ul class="content container">
        <li>
          <div class="show">
            <img src="" alt="">
            <span class="hot active"> HOT </span>
            <span class="sale active"> SALE </span>
          </div>
          <div class="info">
            <p class="title"> 商品介绍按时缴费的宫颈癌三缸发动机阿三哥发动机号按实际换个方式简单化股份见多识广数据大发家史蒂芬霍金阿三哥方式 </p>
            <p>
              折扣: 9
            </p>
            <p class="price">
              <del class="old"> ￥ 200.00 </del>
              <span class="current"> ￥ 100.00 </span>
            </p>
            <p>
              <button>加入购物车</button>
            </p>
          </div>
        </li>
      </ul>
      <div class="footer"></div>

       <script src="../js/jquery.min.js"></script>
      <script src="../js/utils.js"></script>
      <script src="../js/list.js"></script>
</body>
</html>